<template>
  <view class="content">
    <view>
      <view>数据名称:</view>
      <input v-model="fileFormData.name" type="text"
             style="border: 1px solid #99999952;border-radius: 3px;padding: 0px 4px;margin-left: 10px;height: 30px;"/>
    </view>
    <view>
      <view>数据分类:</view>
      <view>

        <select v-model="selectedFirst" @change="onFirstChange" class="selection">
          <option v-for="item in  firstLevelData" :key="item.id" :value="item.id">
            {{ item.fieldName }}
          </option>
        </select>

        <select v-if="selectedFirst" v-model="selectedSecond" @change="onSecondChange" class="selection">
          <option v-for="item in secondLevelData" :key="item.id" :value="item.id">
            {{ item.fieldName }}
          </option>
        </select>

        <select v-if="selectedSecond" v-model="selectedThird" class="selection">
          <option v-for="item in selectedThird" :key="item.id" :value="item.id">
            {{ item.fieldName }}
          </option>
        </select>

        <!-- <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select> -->
      </view>

      <!-- <input type="text"
             style="border: 1px solid #99999952;border-radius: 3px;padding: 0px 4px;margin-left: 10px;height: 30px;"/> -->
    </view>
    <view>
      <view>数据详情:</view>
      <view style="margin-left: 10px;">
				<textarea
            style="font-size: 13px;color: #fff;height: 60px;border: 1px solid #99999952;border-radius: 5px;padding: 3px 5px;width: 100%;"
            v-model="fileFormData.brief" placeholder="请输入数据详情"></textarea>
      </view>
    </view>
    <view>
      <view>购买须知:</view>
      <view style="margin-left: 10px;">
				<textarea
            style="font-size: 13px;color: #fff;height: 60px;border: 1px solid #99999952;border-radius: 5px;padding: 3px 5px;width: 100%;"
            v-model="fileFormData.detail" placeholder="请输入购买须知"></textarea>
      </view>
    </view>
    <view>
      <view>数据价格:</view>
      <radio-group @change="radioChange" style="margin-left: 10px;line-height: 31px;">
        <label class="radio" @click="isInput=false">
          <radio value="2" style="transform:scale(0.7);" color="#2493F1"/>
          自定义价格

        </label>
        <label class="radio" style="margin-left: 10px;" @click="isInput=true">
          <radio value="1" style="transform:scale(0.7);" color="#2493F1"/>
          模型评估
        </label>
      </radio-group>
      <input :disabled="isInput" v-model="fileFormData.price" type="number"
             style="border: 1px solid #99999952;border-radius: 3px;padding: 0 4px;margin-left: 10px;height: 30px;"/>
    </view>
    <view>
      <view>是否购买审核:</view>
      <radio-group @change="radioChange" style="margin-left: 10px;line-height: 31px;">
        <label class="radio">
          <radio value="2" checked="true" style="transform:scale(0.7);" color="#2493F1"/>
          系统审核
        </label>
        <label class="radio" style="margin-left: 10px;">
          <radio value="1" style="transform:scale(0.7);" color="#2493F1"/>
          主动审核
        </label>
      </radio-group>
    </view>
    <view>
      <view>数据文件:</view>
      <uni-file-picker v-model="fileFormData.fileUrl" :auto-upload="false" fileMediatype="all"
                       @select="select" @progress="progress" @success="success" @fail="fail">
      </uni-file-picker>
    </view>
    <view>
      <view>展示图:</view>
      <view>
        <image :src="fileFormData.iconUrl||defaultImage" @click="upload()"
               style="width: 200upx; height: 200upx;"></image>
      </view>
    </view>


    <view>
      <view style="display: block;width: 100%;">
        <button type="primary" @click="submitData()" style="background-color: #2493F1;">
          {{ fileFormData.id != null ? '修改' : '提交' }}
        </button>
      </view>
    </view>

    <!-- 		<view>
      <lb-picker ref="pilePicker" :list="pilePickerData" @confirm="confirmPilePicker"></lb-picker>
    </view> -->

  </view>
</template>

<script>
//TODO 选择分类渲染错误
import LbPicker from '@/components/lb-picker'
import {
  addProduction,
  getProductInfo,
  updateProduction
} from "@/api/product";
import {
  getCategory
} from '@/api/category';

export default {

  data() {
    return {
      selectedFirst: null, // 第一级选中的值
      selectedSecond: null, // 第二级选中的值
      selectedThird: null, // 第三级选中的值
      defaultImage: '/static/imageUpload.png',
      firstLevelData: [],
      firstId: '',
      isInput: false,
      fileFormData: {
        name: '',
        age: '',
        introduction: '',
        audit: '',
        iconUrl: '',
        fileUrl: '',
        range: '',
        isAudit: 0,
        id: '',
        fileId: '',
        typeIdArr: [],
        items: [
          {label: 'Item 1', value: 1},
          {label: 'Item 2', value: 2},
          {label: 'Item 3', value: 3},
          // 更多项目
        ],
        selectedValue: 1,

      },

    };
  },
  watch: {},
  onLoad(options) {
    console.log('options', options)
    this.fileFormData.id = options.id;
    this.loadData();

  },
  computed: {
    secondLevelData() {
      if (!this.selectedFirst) return [];
      let first = this.firstLevelData.find(item => item.id === this.selectedFirst);
      // this.fileFormData.typeIdArr[0]=first.id
      if (!this.fileFormData.typeIdArr.includes(first.id)) {
        this.fileFormData.typeIdArr.push(first.id);
      }
      return first ? first.children : [];
    },
    thirdLevelData() {
      if (!this.selectedSecond) return [];
      let second = this.secondLevelData.find(item => item.id === this.selectedSecond);
      this.fileFormData.typeIdArr.push(second.id)
      return second ? second.children : [];
    },
  },
  methods: {

    handlePickerChange(event) {
      console.log('选择的值:', event.value);
      console.log('选择的项目:', event.item);
    },
    submitData() {
      if (this.fileFormData.name === '') {
        this.$api.msg('请输入数据名称');
        return;
      }
      if (this.fileFormData.detail === '') {
        this.$api.msg('请输入数据详情');
        return;
      }
      if (this.fileFormData.price === '') {
        this.$api.msg('请输入数据价格');
        return;
      }
      if (this.fileFormData.fileUrl === '') {
        this.$api.msg('请上传数据文件');
        return;
      }
      if (this.fileFormData.iconUrl === '') {
        this.$api.msg('请上传展示图');
        return;
      }

      if (this.fileFormData.id != null) {
        updateProduction(this.fileFormData).then(res => {
          if (res.code === 200) {
            console.log('res', res)
            this.$api.msg('修改成功');
            uni.navigateBack();
          } else {
            this.$api.msg(res.msg);
          }
        })
      } else {
        console.log('this.fileFormData', this.fileFormData)
        addProduction(this.fileFormData).then(res => {
          if (res.code === 200) {
            console.log('res', res)
            this.$api.msg('提交成功');
            uni.navigateBack();
          } else {
            this.$api.msg(res.msg);
          }
        });
      }


    },

    onFirstChange() {
      this.selectedSecond = null; // 重置第二级和第三级选择
      this.selectedThird = null;
    },
    onSecondChange() {
      this.selectedThird = null; // 重置第三级选择
    },


    loadData() {
      if (this.fileFormData.id) {
        getProductInfo(this.fileFormData.id).then(res => {
          console.log('res', res)
          this.fileFormData.name = res.data.name;
          this.fileFormData.brief = res.data.brief;
          this.fileFormData.detail = res.data.detail;
          this.fileFormData.price = res.data.priceList[0].price
          this.fileFormData.iconUrl = res.data.iconUrl;
          this.fileFormData.fileUrl = res.data.fileUrl;
          this.fileFormData.isAudit = res.data.isAudit;

        })
      }

      getCategory().then(res => {
        // 获取目录
        this.firstLevelData = res.data
        this.fileFormData.typeIdArr = []
      })


    },

    // 图片上传
    async upload() {
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          uni.uploadFile({
            url: 'https://api.cdszly.cn/nvwa-api/common/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {},
            success: (uploadFileRes) => {
              let fileRes = JSON.parse(uploadFileRes.data);
              this.fileFormData.iconUrl = fileRes.url.replace(
                  'https://api.cdszly.cn/profile/upload',
                  'https://api.cdszly.cn/nvwa-api/profile/upload');
              // this.fileFormData.iconUrl = fileRes.url;
            }
          });
        }
      });

    },

    // 文件上传
    async uploadFile(tempFilePaths) {
      console.log('tempFilePaths', tempFilePaths)
      uni.uploadFile({
        url: 'https://api.cdszly.cn/nvwa-api/common/upload',
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {},
        success: (uploadFileRes) => {
          let fileRes = JSON.parse(uploadFileRes.data)
          this.fileFormData.fileUrl = fileRes.url;
        }
      });
    },

    // 数据文件上传
    // 获取上传状态
    select(e) {
      console.log('选择文件：', e)
      uni.uploadFile({
        url: 'https://api.cdszly.cn/nvwa-api/common/upload',
        filePath: e.tempFilePaths[0],
        name: 'file',
        formData: {},
        success: (uploadFileRes) => {
          let fileRes = JSON.parse(uploadFileRes.data)
          console.log('fileRes', fileRes)
          this.fileFormData.fileId = fileRes.fileId;
          this.fileFormData.fileUrl = fileRes.url.replace(
              'https://api.cdszly.cn/profile/upload',
              'https://api.cdszly.cn/nvwa-api/profile/upload');
          console.log("fileId:", this.fileFormData.fileId);
        }
      });
    },
    // 获取上传进度
    progress(e) {
      console.log('上传进度：', e)
    },

    // 上传成功
    success(e) {
      console.log('上传成功')
    },

    // 上传失败
    fail(e) {
      console.log('上传失败：', e)
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, this.columnData[index])
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
      console.log('confirm', e)
      this.show = true
    },
    radioChange(e) {
      console.log('e', e)
      this.fileFormData.isAudit = Number(e.detail.value);
    },
  },


}
</script>

<style lang="scss">
.content {
  padding: 10px;
  font-size: 14px;
  color: white;

  view {
    margin: 5px 0px;

    // display: flex;
    button {
      width: 40%;
      margin: 10px auto;
    }
  }
}

.uni-textarea-placeholder {
  font-size: 13px;
  color: #919191 !important;
}

.selection {
  width: 200upx;
  background-color: black;
  color: #fff;
}
</style>
